'use client'

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { SkillList } from "@/components/skill-list"
import { AssignmentList } from "@/components/assignment-list"
import { StudentList } from "@/components/student-list"
import { ScoreRecord } from "@/components/score-record"
import { ScoreQuery } from "@/components/score-query"
import { LanguageProvider, useLanguage } from "@/contexts/LanguageContext"

function Home() {
  const [selectedContent, setSelectedContent] = useState<string>("技能列表")
  const { t } = useLanguage()

  const renderContent = () => {
    switch (selectedContent) {
      case t("技能列表"):
        return <SkillList />
      case t("作业列表"):
        return <AssignmentList />
      case t("同学列表"):
        return <StudentList />
      case t("打分记录表"):
        return <ScoreRecord />
      case t("评分查询"):
        return <ScoreQuery />
      default:
        return <div>{t("Select the type of data you want to view or edit from the sidebar.")}</div>
    }
  }

  return (
    <div className="flex h-screen bg-gray-100">
      <Sidebar onSelectItem={setSelectedContent} />
      <main className="flex-1 p-8 overflow-auto">{renderContent()}</main>
    </div>
  )
}

export default function WrappedHome() {
  return (
    <LanguageProvider>
      <Home />
    </LanguageProvider>
  )
}

